<template>
	<view class="list" :offset-accuracy="5" :bounce="false" isSwiperList="true">
		<checkbox-group v-model="checkboxValue" @change="checkboxChange">
			<view class="card" v-for="(item,index) in activeData" :key="index">
				<view v-if="tab.type == 1">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex; flex-flow: row;justify-content: space-between;">
						<view>
							<checkbox :value="item.id.toString()" :borderColor="bgColor" activeBackgroundColor="#fff"
								activeBorderColor="#fff" :checked="item.checked" />
						</view>
					</label>
				</view>
				<view v-if="tab.type == 1" style="margin:20rpx 0px 20rpx 0px;border-bottom: 1px solid #f9f6f9"></view>
				<view style="display: flex;" @click="goMyActive">
					<view style="flex: 1;">
						<u--image :radius="5" :showLoading="true" :src="item.image" width="80px"
							height="80px"></u--image>
					</view>
					<view style="flex: 4;">
						<view style="display: flex;flex-flow: column;flex: 1;margin: 0 6px 0 6px;">
							<view style="display: flex;align-items: center;position: relative;">
								<text class="u-line-1" style="font-size: 16px;font-weight: bold;margin: 20rpx 0;"><text
										v-if="item.brandName != ''">[{{item.brandName ? item.brandName :''}}]</text>{{item.name}}</text>
							</view>

							<view class="name-param" style="display: flex;margin: 10rpx 0;font-size: 26rpx;">
								<text style="margin-right: 10px;">{{item.skuName}}</text>
								<view><text
										style="font-size: 25rpx;margin: 0 12rpx;color: #c9171b;font-weight: bold;">￥13.56</text><text
										style="text-decoration: line-through;color: #999;">￥13.92</text>
								</view>
							</view>

							<view class="name-param" style="color: #999;margin: 12rpx 0;">
								<text style="font-size: 14px;margin-right: 10px;">秒杀时间</text>
								<text>{{item.starTime}}</text>
							</view>
							<view class="name-param" style="color: #999;margin: 12rpx 0;">
								<text style="font-size: 14px;margin-right: 10px;">确认时间</text>
								<text>{{item.activeTime}}</text>
							</view>
							<view class="name-param" style="margin: 12rpx 0;">
								<text style="font-size: 14px;color: #999; margin-right: 10px;">售卖区域</text>
								<text>{{item.operatyCity}}</text>
							</view>
							<view class="name-param"
								style="margin: 12rpx 0;display: flex;justify-content: space-between;">
								<view style="font-size: 14px;color: #999;margin-right: 10px;">单客户限购<text
										style="margin-left: 10rpx;color: #000;">不限</text></view>
								<view style="font-size: 14px;color: #999;">秒杀库存<text
										style="margin-left: 10rpx;color: #000;">200</text></view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</checkbox-group>

		<u-empty v-if=" activeData.length == 0 " style="background-color: #fff;height: 100%;" mode="data"
			icon="/static/empty/data.png"></u-empty>

		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>

</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		props: {
			tab: {
				type: [Object],
				default: ''
			},
			// parentId: {
			// 	type: String,
			// 	default: ''
			// },
			bgColor: {
				type: String,
				default: 'blue'
			},
		},
		data() {
			return {
				// bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				activeData: [{
					id: 1,
					brandName: '',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "一次性餐具包四件套",
					skuName: '10斤/袋(1000包)', //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					starTime: "2024.4.30 00:00-23:00",
					activeTime: "2024.4.17 18:21:45",
					operatyCity: '北京', //1直接生效
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!',
				}, {
					id: 2,
					brandName: '鸿孚乐',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜尝鲜尝鲜尝鲜价04.17-04.30",
					skuName: '10斤/袋(1000包)', //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					starTime: "2024.4.30 00:00-23:00",
					activeTime: "2024.4.17 18:21:45",
					operatyCity: '北京', //1直接生效
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!',
				}],
				checkboxValue: [],
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			//去我的活动
			goMyActive() {
				this.$emit('goMyActive');
			},
			checkboxChange(ele) {
				if (ele && ele.detail && ele.detail.value && ele.detail.value.length) {
					let checkboxValue1 = []
					for (var i = 0; i < ele.detail.value.length; i++) {
						checkboxValue1.push(Number(ele.detail.value[i]))
					}
					this.$set(this, 'checkboxValue', checkboxValue1)
					this.$emit('checkboxChange', checkboxValue1);
				} else {
					this.$emit('checkboxChange', ele);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		background-color: $main-background-color;
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}
</style>
<style scoped>
	.list {
		flex: 1;
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 20rpx;
	}
</style>